<script setup lang="ts">
  import DisplayItem from '@/components/home/largeScreenDisplay/DisplayItem.vue';
  import { reactive } from 'vue';
  import { IDataShow } from '@/api/types';
  import DisplayLineStack from '@/components/home/largeScreenDisplay/DisplayLineStack.vue';
  import DisplayBarStack from '@/components/home/largeScreenDisplay/DisplayBarStack.vue';

  let d = new Date();
  let xAxis = [] as string[];
  for (let i = 0; i < 10; i++) {
    let d1 = new Date(d.getFullYear(), d.getMonth(), d.getDate() - i);
    xAxis.push(`${d1.getMonth() + 1}月${d1.getDate()}日`);
  }
  xAxis.reverse();

  const showData1 = reactive<IDataShow[]>([
    {
      xAxis,
      disData: [13, 6, 15, 16, 17, 12, 21, 18, 12, 12],
      disName: '风疹',
      type: 'line',
    },
    {
      xAxis: [],
      disData: [8, 23, 14, 11, 14, 14, 20, 15, 15, 15],
      disName: '手足口病',
      type: 'line',
    },
    {
      xAxis: [],
      disData: [31, 36, 43, 44, 33, 49, 47, 44, 52, 44],
      disName: '流行性感冒',
      type: 'line',
    },
    {
      xAxis: [],
      disData: [9, 11, 17, 12, 14, 14, 13, 21, 11, 19],
      disName: '流行性腮腺炎',
      type: 'line',
    },
    {
      xAxis: [],
      disData: [7, 11, 10, 11, 6, 16, 14, 14, 13, 18],
      disName: '感染性腹泻病',
      type: 'line',
    },
  ]);

  const showData2 = reactive<IDataShow[]>([
    {
      xAxis,
      disData: [5, 14, 15, 10, 13, 6, 16, 9, 8, 8],
      disName: '糖尿病',
      type: 'bar',
    },
    {
      xAxis: [],
      disData: [30, 28, 19, 31, 21, 32, 32, 23, 33, 26],
      disName: '慢性支气管炎',
      type: 'bar',
    },
    {
      xAxis: [],
      disData: [6, 13, 12, 14, 18, 21, 22, 16, 15, 12],
      disName: '慢性肠炎',
      type: 'bar',
    },
    {
      xAxis: [],
      disData: [32, 22, 31, 21, 33, 19, 21, 26, 21, 24],
      disName: '风湿性关节炎',
      type: 'bar',
    },
  ]);
</script>

<template>
  <DisplayItem>
    <DisplayLineStack class="h-[43.5vh]" :show-data="showData1" />
    <DisplayBarStack class="h-[43.5vh]" :show-data="showData2" />
  </DisplayItem>
</template>

<style lang="scss"></style>
